<script type="text/javascript" src="{{= g_baseUrl}}main/assets/js/plugins/tables/footable/footable.min.js"></script>
<script type="text/javascript" src="{{= g_baseUrl}}main/assets/js/plugins/forms/styling/switchery.min.js"></script>
<script type="text/javascript" src="{{= g_baseUrl}}main/assets/js/plugins/ui/moment/moment.min.js"></script>
<script type="text/javascript" src="{{= g_baseUrl}}main/assets/js/plugins/pagination/bs_pagination.min.js"></script>
<script type="text/javascript" src="{{= g_baseUrl}}main/assets/js/plugins/pagination/datepaginator.min.js"></script>
<script type="text/javascript" src="{{= g_baseUrl}}main/assets/js/plugins/notifications/sweet_alert.min.js"></script>

<style>
    .note {
        padding-top: 0px;
        padding-bottom: 10px;
    }

    .note h4, h4 a {
        color: #f2784b;
    }

    .note .field {
        margin-right: 10px;
    }

    .note a:hover {
        color: #f2784b;
    }

    .time_title {
        overflow: hidden;
        display: inline-table;
    }

    .light_box {
        display: inline-block;
        vertical-align: middle;
        margin-left: 20px;
        cursor: default;
    }

    .small_light {
        width: 12px;
        height: 12px;
        border-radius: 12px;
        background-color: #b1b1b1;
        display: inline-block;
        vertical-align: middle;
    }

    .small_light_full {
        background-color: #54ff00;
        box-shadow: 0 1px 2px #666;
    }

    .light_tip {
        color: #222;
        margin-left: 6px;
        vertical-align: middle;
        font-size: 14px;
    }

    .task-start button ,.task-start button:hover{
        color: #FFFFFF;
        background-color: #26a69a;
    }

    .task-stop button ,.task-stop button:hover{
        color: #FFFFFF;
        background-color: rgb(222, 95, 95);
    }

    .task-start .small_light_state {
        background-color: #54ff00;
        box-shadow: 0 1px 2px #666;
    }

    .task-stop .small_light_state {
        background-color: #b1b1b1;
        box-shadow: none;
    }


</style>

<!-- Page header -->
<div class="page-header page-header-default">
    <div class="page-header-content">
        <div class="page-title">
            <h4><i class="icon-arrow-left52 position-left"></i> <span class="text-semibold">定时任务</span> - 任务列表</h4>
        </div>
    </div>

    <div class="breadcrumb-line">
        <ul class="breadcrumb">
            <li><a><i class="icon-home2 position-left"></i> 定时任务</a></li>
            <li class="active">任务列表</li>
        </ul>
    </div>
</div>
<!-- /page header -->

<!-- Content area -->
<div class="content">

    <!-- Basic responsive configuration -->
    <div class="panel panel-flat">
        <div class="panel-heading">
            <button type="button" class="btn btn-primary" onclick='Alpaca.to("#/main/crontab/editView")'><i class="icon-diff-added position-left"></i> 新建任务</button>

            <div class="time_title task-state task-start" id="task-state">
                <input type="hidden" id="task-state-value" value="">
                <button id="system_switch" class="btn">停止</button>
                <div class="light_box">
                    <i class="small_light small_light_state"></i>
                    <span class="light_tip" id="id_light_tip">运行中</span>
                </div>
            </div>
        </div>
        <div class="datatable-header">
            <div class="dataTables_filter hidden">
                <input type="text" class="" placeholder="查找." id="table-page-key">
                <button type="button" class="btn btn-primary" style="vertical-align: top" id="table-page-search"><i class="icon-search4 position-left"></i>查找</button>
            </div>

            <div class="dataTables_length hidden">
                <span>每页:</span>
                <select style="height: 36px; border: 1px solid #ddd;" id ="table-page-size" >
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
            </div>
        </div>
        <div class="page-table-body"></div>
        <div class="datatable-footer">
            <div class="dataTables_info hidden">
                <span id="table-page-info">显示 1 到 10 共 15 行</span>
            </div>
            <div class="dataTables_paginate">
                <input type="hidden" id ="table-page-num">
                <ul class="pagination-flat pagination-sm table-pagination"></ul>
            </div>
        </div>
    </div>
    <!-- /basic responsive configuration -->

    <!-- Footer -->
    <div id="page-content-footer"></div>
    <!-- /footer -->
</div>
<!-- /content area -->

<div id="modal_form_vertical" class="modal fade"></div>